<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <h1>注册</h1>
    
    <!-- action:可以是请求，网站，地址 -->
    <!-- post安全，传大文件，get高效 -->
    <form action="hello.html" method="GET">
        <!-- <p>名字：<input type="text" name="name" size="30" value="admin" readonly maxlength="8"></p> -->
        <!-- <p>密码：<input type="password" name="password" value="123456" hidden></p> -->
        <p>名字：<input type="text" name="name" placeholder="请输入用户名" required></p>
        <p>密码：<input type="password" name="password"></p>
        <p>性别：
            <input type="radio" value="boy" name="sex" checked disabled>男
            <input type="radio" value="girl" name="sex">女
        </p>
        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="code" name="hobby" checked>代码
            <input type="checkbox" value="game" name="hobby">游戏
        </p>
        <p>按钮：
            <input type="button" name="btn1" value="点击变长">
        </p>
        <p>图片按钮：
            <!-- <input type="image" src="../resource/image/1.jpg"> -->
        </p>
        <!-- 
            type="button"  普通按钮
            type="image"   图片按钮
            type="submit"  提交按钮
            type="reset"   重置按钮
        -->
    
        <!-- 下拉框   列表框-->
        <p>下拉框:
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="en">音国</option>
                <option value="us">没国</option>
                <option value="eth" selected>瑞士</option>
                <option value="ying">中家国</option>
            </select>
        </p>

        <p>文本域：
            <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
        </p>

        <p>文件域：
            <input type="file" name="files">
            <input type="button" name="upload" value="上传文件">
        </p>

       <!-- 邮件验证 -->
       <p>邮件验证：
          <input type="email" name="email">
       </p>
       <!-- url验证 -->
        <p>url验证：
            <input type="url" name="email">
        </p>
        <!-- 数字验证 -->
        <p>数字验证：
            <input type="number" name="number" max="100" min="10">
        </p>

        <!-- 滑块 -->
        <p>滑块：
            <input type="range" name="voice" max="100" min="10" step="1">
        </p>
        
        <!-- 搜索框 -->
        <p>搜索框：
            <input type="search" name="search" >
        </p>

        <p>增强鼠标可用性：
            <label for="mark">点击试试</label>
            <input type="text" name="label"  id="mark">
        </p>

        <!-- 正则表达式 -->
        <p>自定义邮箱：
            <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
        </p>

        <p>
            <input type="submit" name="submit" value="submit">
            <input type="reset" name="reset" value="reset" step="10">
        </p>



    </form>
</body>
</html>